<section style="width: 100%">
  <div class="devui-input-group devui-dropdown-origin">
    <input
      class="devui-input devui-form-control"
      placeholder="y/MM/dd  -  y/MM/dd"
      name="dp"
      [(ngModel)]="dateRange"
      (click)="dateRangePicker.toggle()"
      autocomplete="off"
      dDateRangePicker
      #dateRangePicker="dateRangePicker"
      (selectedRangeChange)="getValue($event)"
      [showTime]="true"
      [dateFormat]="'y-MM-dd HH:mm:ss'"
    />
    <div *ngIf="everyRange(dateRange)" class="devui-input-group-addon close-icon-wrapper" (click)="dateRangePicker.clearAll()">
      <i class="icon icon-close"></i>
    </div>
    <div class="devui-input-group-addon" (click)="dateRangePicker.toggle()">
      <i class="icon icon-calendar"></i>
    </div>
  </div>

  <div class="devui-input-group devui-dropdown-origin">
    <input
      class="devui-input devui-form-control"
      placeholder="y/MM/dd  -  y/MM/dd"
      name="dp"
      [(ngModel)]="dateRange2"
      (click)="dateRangePicker2.toggle()"
      autocomplete="off"
      dDateRangePicker
      #dateRangePicker2="dateRangePicker"
      (selectedRangeChange)="getValue($event)"
      [showTime]="true"
      style="width: 270px"
    />
    <div *ngIf="everyRange(dateRange2)" class="devui-input-group-addon close-icon-wrapper" (click)="dateRangePicker2.clearAll()">
      <i class="icon icon-close"></i>
    </div>
    <div class="devui-input-group-addon" (click)="dateRangePicker2.toggle()">
      <i class="icon icon-calendar"></i>
    </div>
  </div>
</section>
